import styles from './register.module.scss';
import Button from '../../components/button/button';
import { Link } from 'react-router-dom';
import { FieldValues, useForm, SubmitHandler } from 'react-hook-form';
import { DevTool } from '@hookform/devtools';

export const Register = () => {
interface IInputs {
	email: string,
	password: string,
	fullName: string
}

const {
	register,
	handleSubmit,
	watch,
	formState: { errors }
} = useForm<IInputs>();
const onSubmit: SubmitHandler<IInputs> = (data) => console.log(data);
/* для  DevTool зависимостью является control*/
return (
	<div>
		{/* {error && <p style={{ color: 'red' }}>{error}</p>} */}
		<h2>Регистрация</h2>
		<form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
			<div className={styles.input}>
				<label htmlFor="email">Ваш email</label>
				<input
					id="email"
					{...register('email', {
						required: 'Обязательное поле',
						validate: {
							// number: value => /\d/.test(value) || 'Пароль должен содержать хотя бы одну цифру!',
							// letter: value => /[A-Za-z]/.test(value) || 'Пароль должен содержать хотя бы одну букву!',
							// upperLetter: value => /[A-Z]/.test(value) || 'Пароль должен содержать одну заглавную букву!',
							isEmail: value => /^[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}$/i.test(value) || 'Введите корректный ящик'
						}
					})}
					type="text"
				/>
				{/* {errors.name?.message && <p style={{ color: 'red' }}>{errors.name?.message}</p>} */}
			</div>
			<div className={styles.input}>
				<label htmlFor="password">Ваш пароль</label>
			</div>
			<div className={styles.input}>
				<label htmlFor="fullName">Ваше имя</label>
			</div>
			<Button appearance="big">Зарегистрироваться</Button>
		</form>
		<DevTool control={control} />
		<div className={styles.navigation}>
			<div>
          Есть аккаунт?{' '}
				<Link
					style={{ color: '#ffa600' }}
					className={styles.href}
					to="/auth/login"
				>
            Войти
				</Link>
			</div>
			<div>
				<Link style={{ color: '#ffa600' }} className={styles.href} to="/">
            На главную
				</Link>
			</div>
		</div>
	</div>
);
};
